<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <el-drawer title="活动行为明细" :visible.sync="show" :loading="loading" :destroy-on-close="true"
        size="800px">
        <el-table size="mini" :data="items" height="80vh" :show-header="false">
            <el-table-column prop="name" width="260"></el-table-column>
            <el-table-column prop="ip"></el-table-column>
            <el-table-column prop="ip_region"></el-table-column>
            <el-table-column prop="seconds" width="80"></el-table-column>
            <el-table-column width="150">
                <template slot-scope="scope">{{ scope.row.created_at }}</template>
            </el-table-column>
        </el-table>

        <div class="pager">
            <el-pagination hide-on-single-page background layout="total, sizes, prev, pager, next, jumper" :total="total"
                :page-size="20" @current-change="pageChange" />
        </div>
        <div style="display:flex;justify-content:center;margin-top:20px;">
            <el-button v-loading="loading" :disabled="loading" type="primary" size="small" plain round icon="el-icon-download"
                @click="downloadHandle">下载导出</el-button>
        </div>
    </el-drawer>
</template>

<script>
import { getVisitorActions, exportVistorAction } from "@/api/visitor";
export default {
    data () {
        return {
            items: [],
            vid: null,
            show: false,
            per_page: 20,
            page: 1,
            total: 0,
            loading: false,
        };
    },
    props: {},

    mounted: function () { },

    computed: {},

    methods: {
        pageChange: function (page) {
            this.page = page;
            this.loadData();
        },

        loadData: function () {
            this.loading = true;
            var query = {
                uid: this.vid,
                per_page: this.per_page,
                page: this.page,
            };
            getVisitorActions(query).then((resp) => {
                this.loading = false;
                this.items = resp.data.result;
                this.total = resp.data.page.total_items;
            });
        },
        openDialog: function (vid) {
            this.show = true;
            this.vid = vid;
            this.loadData()
        },

        downloadHandle: function () {
            this.loading = true;
            var _this = this;
            exportVistorAction({
                uid: this.vid,
            }).then(res  =>{
                this.loading = false;
                    const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

                    // 创建一个a标签
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob); // 设置文件的URL
                    link.download = '访客足迹表.xlsx'; // 设置文件的下载名称

                    // 模拟用户点击链接进行下载
                    link.click();

                    // 释放URL对象
                    URL.revokeObjectURL(link.href);
                })
                .finally(() => {
                    this.loading = false;
                    this.listLoading = false;
                });
        },

    },
};
</script>

<style scoped></style>
